<template>
  <view class="container">
    <view class="datecard">
      <view class="head">
        <text>请选择时间</text>
      </view>
      <view class="card">
        <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
          class="picker-view">
          <picker-view-column>
            <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item,index) in hours" :key="index">{{item}}</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item,index) in minutes" :key="index">{{item}}</view>
          </picker-view-column>
        </picker-view>
      </view>
      <view class="btn">
        <button @click="onCancel">取消</button>
        <button @click="onConfirm">确定</button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data: function() {
      const date = new Date()
      const years = []
      const year = date.getFullYear()
      const months = []
      const month = date.getMonth() + 1
      const days = []
      const day = date.getDate()
      const hours = []
      const hour = date.getHours()
      const minutes = []
      const minute = date.getMinutes()
      for (let i = 1990; i <= date.getFullYear(); i++) {
        years.push(i)
      }
      for (let i = 1; i <= 12; i++) {
        months.push(i)
      }
      for (let i = 1; i <= 31; i++) {
        days.push(i)
      }
      for (let i = 0; i <= 23; i++) {
        if (i < 10) {
          i = '0' + i
        }
        hours.push(i)
      }
      for (let i = 0; i <= 59; i++) {
        if (i < 10) {
          i = '0' + i
        }
        minutes.push(i)
      }
      return {
        title: 'picker-view',
        years,
        year,
        months,
        month,
        days,
        day,
        hours,
        hour,
        minutes,
        minute,
        value: [9999, month - 1, day - 1, hour, minute],
        visible: true,
        indicatorStyle: `height: 100upx;`
      }
    },
    methods: {
      bindChange: function(e) {
        const val = e.detail.value
        this.year = this.years[val[0]]
        this.month = this.months[val[1]]
        this.day = this.days[val[2]]
        this.hour = this.hours[val[3]]
        this.minute = this.minutes[val[4]]
      },
      onCancel() {
        this.$emit("onCancel", {
          dateValue:true
        });
      },
      onConfirm() {
        let num = ''
        let hourNum = ''
        if (this.minute.toString().length == 1) {
          num = '0' + this.minute
        } else {
          num = this.minute
        }
        if (this.hour.toString().length == 1) {
          hourNum = '0' + this.hour
        } else {
          hourNum = this.hour
        }
        this.$emit("onConfirm", {
          date: this.year + '年' + this.month + '月' + this.day + '日',
          time: hourNum + ':' + num
        });
      }
    },

  }
</script>

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .container {
    height: 100vh;
  }

  .datecard {
    width: 750upx;
    height: 714upx;
    background-color: #FFFFFF;
    opacity: 1;
    border-radius: 20upx 20upx 0upx 0upx;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .datecard>.head {
    width: 690upx;
    height: 80upx;
    margin: 0 30upx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .head>text {
    width: 400upx;
    height: 48upx;
    font-size: 34upx;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 48upx;
    color: #333333;
    opacity: 1;
  }

  .head>image {
    width: 48upx;
    height: 48upx;
  }

  .datecard>.card {
    width: 750upx;
    height: 505upx;
  }

  .card>.picker-view {
    width: 630upx;
    height: 505upx;
    font-size: 28upx;
    margin: 0 60upx;
    text-align: center;
  }

  .picker-view /deep/ .item {
    line-height: 88upx;
  }

  .datecard>.btn {
    width: 750upx;
    height: 120upx;
    line-height: 120upx;
    display: flex;
    justify-content: space-around;
    margin-top: 20upx;
    border-top: 1upx solid #e5e5e5;
    background-color: #fff !important;
  }

  .btn>button:nth-child(1) {
    width: 330upx;
    height: 70upx;
    line-height: 70upx;
    border-radius: 8upx;
    border: 1upx solid #2DB88A;
    font-size: 28upx;
    color: #2DB88A;
    margin-top: 20upx;
    background-color: #fff !important;
  }

  .btn>button:nth-child(2) {
    width: 330upx;
    height: 70upx;
    line-height: 70upx;
    border-radius: 8upx;
    background-color: #2DB88A;
    font-size: 28upx;
    color: #ffffff;
    margin-top: 20upx;
  }
</style>